<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>涂涂高频词</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <style>
        :root {
            --deep-blue: #1a237e;
            --yellow: #ffeb3b;
        }

        body {
            background: var(--deep-blue);
            color: white;
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            font-size: 140px;
            text-align: center;
        }

        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px 0px;
            position: fixed;
            top: 20px;
            left: 20px;
            width: 95%;
            background: var(--deep-blue);
            z-index: 1000;
        }

        .header h1 {
            margin: 0;
            font-size: 60px;
            flex-grow: 1;
            text-align: center;
        }

        .word-list {
            display: none;
            flex-direction: column;
            gap: 40px;
            padding: 200px 20px 150px 20px;
            align-items: center;
        }

        .active {
            display: flex;
        }

        .word-item {
            display: flex;
            align-items: center;
            gap: 50px;
            width: 100%;
            justify-content: center;
        }

        button {
            background: var(--yellow);
            border: none;
            border-radius: 50%;
            width: 120px;
            height: 120px;
            cursor: pointer;
            font-size: 80px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .nav-buttons {
            position: fixed;
            bottom: 50px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 60px;
        }

        .example-popup {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: var(--deep-blue);
            color: white;
            padding: 200px 40px 150px 40px;
            font-size: 100px;
            text-align: center;
            z-index: 1000;
            overflow-y: auto;
            white-space: pre-wrap;
            padding: 0 40px;
        }

        .example-popup .word-display {
            font-size: 250px; /* 超大字体 */
            color: var(--yellow); /* 黄色 */
            width: 80%; /* 占据屏幕宽度的 80% */
            margin: 0 auto 40px; /* 居中显示 */
            text-align: center;
        }
        
        .example-popup .example-text {
            font-size: 150px; /* 大字体 */
            width: 90%; /* 占据屏幕宽度的 80% */
            margin: 0 auto 20px; /* 居中显示 */
            text-align: center;
        }      

        .example-popup button {
            position: fixed;
            bottom: 80px;
            left: 50%;
            transform: translateX(-50%);
        }

        .markdown-input {
            background: rgba(255, 255, 255, 0.9);
            padding: 40px;
            border-radius: 10px;
            width: 90%;
            max-width: 800px;
            font-size: 40px;
            color: black;
            text-align: left;
            overflow-y: auto;
            max-height: 80vh;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 1001;
        }

        .markdown-input button {
            font-size: 32px;
            width: auto;
            height: auto;
            padding: 10px 20px;
            border-radius: 10px;
            margin-top: 20px;
        }

        .markdown-input .button-group {
            display: flex;
            justify-content: flex-end;
            gap: 20px;
        }

        .dropdown-menu {
            display: none;
            background: white;
            padding: 20px;
            border-radius: 10px;
            color: black;
            font-size: 40px;
            position: fixed;
            top: 120px;
            left: 20px;
            z-index: 1002;
            overflow-y: auto;
            width: 30%;
            max-height: 80vh;
        }

        .dropdown-menu div {
            padding: 10px;
            cursor: pointer;
        }

        .dropdown-menu div:hover {
            background: #f0f0f0;
        }
    </style>
</head>
<body>
    <!-- 顶部标题栏 -->
    <div class="header">
        <button onclick="toggleMenu()"><i class="fas fa-bars"></i></button>
        <h1 id="family-title">涂涂高频词</h1>
        <button class="import-btn" onclick="showImportDialog()"><i class="fas fa-file-import"></i></button>
    </div>

    <!-- 单词列表容器 -->
    <div id="content"></div>

    <!-- 导航按钮 -->
    <div class="nav-buttons">
        <button onclick="prev()"><i class="fas fa-arrow-left"></i></button>
        <button onclick="next()"><i class="fas fa-arrow-right"></i></button>
    </div>

    <!-- 例句弹窗 -->
    <div class="example-popup" id="popup">
        <div class="word-display" id="word-display"></div> <!-- 新增单词显示区域 -->
        <div class="example-text" id="example-text"></div>
        <button onclick="closePopup()"><i class="fas fa-arrow-left"></i></button>
    </div>

    <!-- Markdown输入框 -->
    <div class="markdown-input" id="markdown-input" style="display: none;">
        <textarea id="markdown-text" rows="20" style="width: 100%; font-size: 40px;"></textarea>
        <div class="button-group">
            <button onclick="closeImportDialog()">取消</button>
            <button onclick="importMarkdown()">导入</button>
        </div>
    </div>

    <!-- 下拉菜单 -->
    <div id="menu" class="dropdown-menu"></div>

    <script>
        // 内置完整词表数据
        const wordData = [
            {
                level: 1,
                family: "-at 家族",
                words: [
                    { word: "cat", example: "The cat is on the mat." },
                    { word: "hat", example: "My hat is red." },
                    { word: "bat", example: "I see a bat in the tree." },
                    { word: "mat", example: "Sit on the mat." },
                    { word: "rat", example: "The rat ran fast." },
                    { word: "sat", example: "She sat on the bed." },
                    { word: "fat", example: "The fat cat can run." },
                    { word: "pat", example: "Pat the dog." }
                ]
            },
            {
                level: 1,
                family: "-an 家族",
                words: [
                    { word: "can", example: "I can see the fan." },
                    { word: "man", example: "The man has a pan." },
                    { word: "ran", example: "He ran to the van." },
                    { word: "fan", example: "The fan is on the wall." },
                    { word: "pan", example: "My mom has a big pan." },
                    { word: "van", example: "The van is blue." }
                ]
            },
            {
                level: 1,
                family: "-ap 家族",
                words: [
                    { word: "cap", example: "Put the cap on your head." },
                    { word: "map", example: "This map is for you." },
                    { word: "tap", example: "Tap the door with your hand." },
                    { word: "nap", example: "The cat took a nap." }
                ]
            },
            {
                level: 1,
                family: "-am 家族",
                words: [
                    { word: "am", example: "I am happy." },
                    { word: "ham", example: "The ham is in the pan." },
                    { word: "jam", example: "I like jam on my bread." },
                    { word: "ram", example: "The ram ran up the hill." }
                ]
            },
            {
                level: 1,
                family: "-ad 家族",
                words: [
                    { word: "dad", example: "My dad is tall." },
                    { word: "sad", example: "The boy is sad." },
                    { word: "mad", example: "She is mad at me." },
                    { word: "had", example: "I had a red hat." }
                ]
            },
            {
                level: 1,
                family: "-it 家族",
                words: [
                    { word: "it", example: "It is on the mat." },
                    { word: "sit", example: "Sit down here." },
                    { word: "bit", example: "The dog bit the ball." },
                    { word: "hit", example: "Do not hit the cat." },
                    { word: "fit", example: "This hat fits my head." },
                    { word: "pit", example: "The pit is in the ground." }
                ]
            },
            {
                level: 1,
                family: "-ig 家族",
                words: [
                    { word: "big", example: "That is a big pig." },
                    { word: "pig", example: "The pig is pink." },
                    { word: "dig", example: "I can dig in the sand." },
                    { word: "wig", example: "She has a red wig." }
                ]
            },
            {
                level: 1,
                family: "-op 家族",
                words: [
                    { word: "top", example: "The cat is on top." },
                    { word: "hop", example: "The rabbit can hop." },
                    { word: "pop", example: "The ball will pop." },
                    { word: "mop", example: "Use the mop on the floor." }
                ]
            },
            {
                level: 1,
                family: "-ot 家族",
                words: [
                    { word: "not", example: "This is not my hat." },
                    { word: "hot", example: "The pan is hot." },
                    { word: "pot", example: "The pot has soup." },
                    { word: "dot", example: "There is a dot on the paper." }
                ]
            },
            {
                level: 1,
                family: "-ug 家族",
                words: [
                    { word: "bug", example: "A bug is on the rug." },
                    { word: "rug", example: "The rug is soft." },
                    { word: "mug", example: "My dad has a big mug." },
                    { word: "hug", example: "Give me a hug!" }
                ]
            },
            {
                level: 2,
                family: "-ake 家族",
                words: [
                    { word: "make", example: "I can make a cake." },
                    { word: "take", example: "Take the map with you." },
                    { word: "cake", example: "The cake is on the table." },
                    { word: "bake", example: "Mom will bake a pie." }
                ]
            },
            {
                level: 2,
                family: "-ay 家族",
                words: [
                    { word: "day", example: "Today is a good day." },
                    { word: "say", example: "Say hello to the cat." },
                    { word: "play", example: "Let’s play with the ball." },
                    { word: "way", example: "This is the way home." }
                ]
            },
            {
                level: 2,
                family: "-ee 家族",
                words: [
                    { word: "see", example: "I see a big tree." },
                    { word: "tree", example: "The tree is green." },
                    { word: "three", example: "I have three red hats." },
                    { word: "green", example: "The frog is green." }
                ]
            },
            {
                level: 2,
                family: "-ea 家族",
                words: [
                    { word: "eat", example: "I eat jam on bread." },
                    { word: "read", example: "Read this book with me." },
                    { word: "tea", example: "My mom drinks tea." },
                    { word: "seat", example: "Sit in your seat." }
                ]
            },
            {
                level: 2,
                family: "-ight 家族",
                words: [
                    { word: "light", example: "Turn on the light." },
                    { word: "night", example: "The moon is bright at night." },
                    { word: "right", example: "Turn right at the tree." },
                    { word: "bright", example: "The sun is bright." }
                ]
            },
            {
                level: 2,
                family: "-ine 家族",
                words: [
                    { word: "nine", example: "I am nine years old." },
                    { word: "line", example: "Stand in a line." },
                    { word: "mine", example: "This book is mine." },
                    { word: "fine", example: "I feel fine today." }
                ]
            },
            {
                level: 2,
                family: "-ow 家族",
                words: [
                    { word: "how", example: "How are you?" },
                    { word: "now", example: "Let’s go now." },
                    { word: "cow", example: "The cow says \"moo\"." },
                    { word: "down", example: "Sit down on the mat." }
                ]
            },
            {
                level: 2,
                family: "-all 家族",
                words: [
                    { word: "all", example: "All the kids are here." },
                    { word: "ball", example: "Throw the ball to me." },
                    { word: "call", example: "Call me tomorrow." },
                    { word: "fall", example: "Don’t fall off the bed." }
                ]
            },
            {
                level: 2,
                family: "-ink 家族",
                words: [
                    { word: "think", example: "I think it is fun." },
                    { word: "drink", example: "Drink water every day." },
                    { word: "pink", example: "Her hat is pink." },
                    { word: "sink", example: "Wash your hands in the sink." }
                ]
            },
            {
                level: 3,
                family: "-ock 家族",
                words: [
                    { word: "rock", example: "The rock is heavy." },
                    { word: "sock", example: "Put on your red socks." },
                    { word: "block", example: "The baby plays with blocks." },
                    { word: "clock", example: "Look at the clock on the wall." }
                ]
            },
            {
                level: 3,
                family: "-ump 家族",
                words: [
                    { word: "jump", example: "The dog can jump high." },
                    { word: "bump", example: "Don’t bump your head!" },
                    { word: "pump", example: "Pump air into the ball." },
                    { word: "stump", example: "The tree has a big stump." }
                ]
            },
            {
                level: 3,
                family: "-ell 家族",
                words: [
                    { word: "well", example: "I feel well today." },
                    { word: "tell", example: "Tell me a story." },
                    { word: "sell", example: "She will sell her old toys." },
                    { word: "smell", example: "I smell something good!" }
                ]
            },
            {
                level: 3,
                family: "-est 家族",
                words: [
                    { word: "best", example: "You are my best friend." },
                    { word: "nest", example: "The bird is in the nest." },
                    { word: "rest", example: "Let’s rest under the tree." },
                    { word: "test", example: "I have a math test today." }
                ]
            },
            {
                level: 3,
                family: "-and 家族",
                words: [
                    { word: "and", example: "You and I can play." },
                    { word: "hand", example: "Hold my hand." },
                    { word: "stand", example: "Stand up straight." },
                    { word: "sand", example: "The sand is hot." }
                ]
            },
            {
                level: 3,
                family: "-ent 家族",
                words: [
                    { word: "went", example: "We went to the park." },
                    { word: "sent", example: "Mom sent me a letter." },
                    { word: "spent", example: "I spent time with my cat." },
                    { word: "tent", example: "Sleep in the tent tonight." }
                ]
            },
            {
                level: 3,
                family: "-ing 家族",
                words: [
                    { word: "sing", example: "Let’s sing a song." },
                    { word: "ring", example: "The bell will ring soon." },
                    { word: "bring", example: "Bring your book here." },
                    { word: "thing", example: "This thing is too big." }
                ]
            },
            {
                level: 3,
                family: "-old 家族",
                words: [
                    { word: "old", example: "My shoes are old." },
                    { word: "cold", example: "Drink tea if you feel cold." },
                    { word: "hold", example: "Hold the baby carefully." },
                    { word: "gold", example: "The ring is made of gold." }
                ]
            },
            {
                level: 4,
                family: "颜色词",
                words: [
                    { word: "red", example: "The apple is red." },
                    { word: "blue", example: "The sky is blue." },
                    { word: "yellow", example: "The sun is yellow." },
                    { word: "black", example: "The cat is black." },
                    { word: "white", example: "The snow is white." }
                ]
            },
            {
                level: 4,
                family: "数字词",
                words: [
                    { word: "one", example: "I have one sister." },
                    { word: "two", example: "Two dogs ran fast." },
                    { word: "three", example: "Three kids are playing." },
                    { word: "four", example: "There are four chairs." },
                    { word: "five", example: "I ate five cookies." }
                ]
            },
            {
                level: 4,
                family: "疑问词",
                words: [
                    { word: "who", example: "Who is at the door?" },
                    { word: "what", example: "What is in the box?" },
                    { word: "where", example: "Where is my hat?" },
                    { word: "when", example: "When can we eat?" },
                    { word: "why", example: "Why are you sad?" }
                ]
            },
            {
                level: 4,
                family: "介词",
                words: [
                    { word: "in", example: "The cat is in the box." },
                    { word: "on", example: "The book is on the table." },
                    { word: "at", example: "Look at the moon!" },
                    { word: "by", example: "Sit by me." },
                    { word: "for", example: "This gift is for you." },
                    { word: "with", example: "Play with your friends." }
                ]
            },
            {
                level: 4,
                family: "代词",
                words: [
                    { word: "I", example: "I like to read." },
                    { word: "you", example: "You are my friend." },
                    { word: "he", example: "He has a blue bike." },
                    { word: "she", example: "She can run fast." },
                    { word: "we", example: "We will go together." },
                    { word: "they", example: "They are happy." }
                ]
            },
            {
                level: 4,
                family: "动词（不规则）",
                words: [
                    { word: "run", example: "I run every morning." },
                    { word: "come", example: "Come here now!" },
                    { word: "go", example: "Let’s go to the park." },
                    { word: "give", example: "Give me the ball." },
                    { word: "find", example: "Can you find my keys?" },
                    { word: "know", example: "I know the answer." }
                ]
            },
            {
                level: 4,
                family: "形容词",
                words: [
                    { word: "good", example: "This cake is good." },
                    { word: "new", example: "I have a new hat." },
                    { word: "little", example: "The little girl is smiling." },
                    { word: "funny", example: "The clown is funny!" },
                    { word: "pretty", example: "The flower is pretty." }
                ]
            },
            {
                level: 4,
                family: "连接词",
                words: [
                    { word: "and", example: "You and I are friends." },
                    { word: "but", example: "I want to go, but I can’t." },
                    { word: "or", example: "Do you want tea or milk?" },
                    { word: "because", example: "I’m happy because it’s sunny." },
                    { word: "if", example: "If you go, take an umbrella." }
                ]
            },
            {
                level: 5,
                family: "时间相关",
                words: [
                    { word: "today", example: "Today is Monday." },
                    { word: "tomorrow", example: "Let’s meet tomorrow." },
                    { word: "yesterday", example: "Yesterday was rainy." },
                    { word: "never", example: "I never eat bugs!" },
                    { word: "always", example: "She always says \"thank you\"." }
                ]
            },
            {
                level: 5,
                family: "情感与状态",
                words: [
                    { word: "happy", example: "The boy is happy." },
                    { word: "sad", example: "Why are you sad?" },
                    { word: "angry", example: "Don’t be angry with me." },
                    { word: "afraid", example: "I am afraid of the dark." },
                    { word: "tired", example: "The dog looks tired." }
                ]
            },
            {
                level: 5,
                family: "抽象概念",
                words: [
                    { word: "under", example: "The cat is under the bed." },
                    { word: "over", example: "Jump over the rock!" },
                    { word: "before", example: "Wash your hands before eating." },
                    { word: "after", example: "We play after school." },
                    { word: "around", example: "Walk around the tree." }
                ]
            },
            {
                level: 5,
                family: "复杂动词",
                words: [
                    { word: "laugh", example: "The joke makes me laugh." },
                    { word: "open", example: "Open the door, please." },
                    { word: "close", example: "Close your eyes." },
                    { word: "write", example: "Write your name here." },
                    { word: "draw", example: "Can you draw a cat?" }
                ]
            },
            {
                level: 5,
                family: "功能词",
                words: [
                    { word: "their", example: "Their house is big." },
                    { word: "there", example: "There is a cat on the mat." },
                    { word: "these", example: "These are my books." },
                    { word: "those", example: "Those flowers are pretty." },
                    { word: "which", example: "Which color do you like?" }
                ]
            }
        ];

        let families = []; // 扁平化的词族列表
        let currentFamilyIndex = 0;

        // 处理数据为扁平结构
        function processData() {
            families = [];
            wordData.forEach((levelData, levelIndex) => {
                families.push({
                    level: levelData.level,
                    family: levelData.family,
                    words: levelData.words,
                    levelIndex: levelIndex
                });
            });
        }

        // 显示当前词族
        function showCurrentFamily() {
            const container = document.getElementById('content');
            container.innerHTML = '';

            const current = families[currentFamilyIndex];
            if (!current) return;

            // 更新标题
            document.getElementById('family-title').textContent = `Level ${current.level} - ${current.family}`;

            const div = document.createElement('div');
            div.className = 'word-list active';
            div.innerHTML = `
                ${current.words.map(word => `
                    <div class="word-item">
                        <span>${word.word}</span>
                        <button onclick="showExample('${word.word}', '${word.example.replace(/'/g, "\\'")}')">
                            <i class="fas fa-comment"></i>
                        </button>
                    </div>
                `).join('')}
            `;
            container.appendChild(div);
        }

        // 显示例句
        function showExample(word, example) {
            document.getElementById('word-display').textContent = word; // 显示单词
            document.getElementById('example-text').textContent = example; // 显示例句
            document.getElementById('popup').style.display = 'block';
        }

        // 关闭弹窗
        function closePopup() {
            document.getElementById('popup').style.display = 'none';
        }

        // 切换菜单显示
        function toggleMenu() {
            const menu = document.getElementById('menu');
            menu.style.display = menu.style.display === 'block' ? 'none' : 'block';
        }

        // 初始化菜单（单层显示词族）
        function initMenu() {
            const menu = document.getElementById('menu');
            menu.innerHTML = '';

            families.forEach((family, index) => {
                const familyItem = document.createElement('div');
                familyItem.textContent = family.family;
                familyItem.style.padding = '10px';
                familyItem.style.cursor = 'pointer';
                familyItem.onclick = () => {
                    currentFamilyIndex = index;
                    showCurrentFamily();
                    toggleMenu();
                };
                menu.appendChild(familyItem);
            });
        }

        // 导航功能
        function prev() {
            if (currentFamilyIndex > 0) {
                currentFamilyIndex--;
                showCurrentFamily();
            }
        }

        function next() {
            if (currentFamilyIndex < families.length - 1) {
                currentFamilyIndex++;
                showCurrentFamily();
            }
        }

        // 显示导入对话框
        function showImportDialog() {
            document.getElementById('markdown-input').style.display = 'block';
        }

        // 关闭导入对话框
        function closeImportDialog() {
            document.getElementById('markdown-input').style.display = 'none';
        }

        // 导入Markdown数据
        function importMarkdown() {
            const md = document.getElementById('markdown-text').value;
            if (md) {
                try {
                    const newData = parseMarkdown(md);
                    wordData = newData;
                    processData();
                    currentFamilyIndex = 0;
                    showCurrentFamily();
                    initMenu();
                    closeImportDialog();
                    alert('导入成功！');
                } catch (e) {
                    alert('格式解析错误，请检查Markdown格式');
                }
            }
        }

        // Markdown解析器
        function parseMarkdown(md) {
            const result = [];
            let currentLevel = null;
            let currentFamily = null;

            md.split('\n').forEach(line => {
                const levelMatch = line.match(/^#+ Level (\d+)/);
                if (levelMatch) {
                    currentLevel = parseInt(levelMatch[1]);
                    return;
                }

                const familyMatch = line.match(/#### (.*家族)/);
                if (familyMatch) {
                    if (currentLevel) {
                        result.push({
                            level: currentLevel,
                            family: familyMatch[1],
                            words: []
                        });
                        currentFamily = result[result.length - 1];
                    }
                    return;
                }

                const wordMatch = line.match(/\d+\. \*\*(.*?)\*\* - (.*)/);
                if (wordMatch && currentFamily) {
                    currentFamily.words.push({
                        word: wordMatch[1],
                        example: wordMatch[2]
                    });
                }
            });

            return result;
        }

        // 初始化
        function init() {
            processData();
            initMenu();
            showCurrentFamily();
        }

        window.onload = init;
    </script>
</body>
</html>